<template>
  <div id="manage">
    <el-table
      :data="coverData"
      empty-text="暂时还没任何数据哦"
      stripe
      border
  >
    <el-table-column
      label="图片标题"
      align="center"
    >
      <template #default="scope">
        <el-input type="text" v-model="scope.row.title"></el-input>
      </template>
    </el-table-column>
    <el-table-column
      label="图片"
      align="center"
    >
      <template #default="scope">
        <el-image
          style="width: 100px; height: 100px"
          :src="baseURL+scope.row.src"
          lazy
        >
        <template #error>
          <div class="image-slot">
            <i class="iconfont icon-bianzu"></i>
            加载失败
          </div>
        </template>
        <template #placeholder>
          <div class="error">
          <el-icon class="is-loading">
            <i class="iconfont icon-zhengzaijiazai" style="font-size='20px'"></i>
          </el-icon>
          正在加载
          </div>
        </template>
        </el-image>
      </template>
    </el-table-column>
    <el-table-column 
      prop="author.name"
      label="发表者"
      align="center">
    </el-table-column>
    <el-table-column
      prop="date"
      label="发表时间"
      align="center"
    >
      <template #default="scope">
        {{conversionDate(scope.row.date)}}
      </template>
    </el-table-column>
    <el-table-column 
      label="重新上传图片"
      align="center"
    >
      <template #default="scope">
        <el-upload
          class="upload-demo"
          :action="baseURL+'/admin/album/update/update'"
          :limit="1"
          :on-change="coverChange"
          :on-success="coverSuccess"
          :with-credentials="true"
          :data="scope.row"
        >
          <el-button type="primary" size="small">点击重新上传</el-button>
        </el-upload>
      </template>
    </el-table-column>
    <el-table-column
      label="操作"
      align="center"
    >
      <template #default="scope">
        <el-popover placement="top" :width="160" v-model:visible="scope.row.visible">
        <p>确认保存修改的内容吗？</p>
        <div style="text-align: right; margin: 0">
          <el-button size="mini" type="text" @click="scope.row.visible = false">取消</el-button>
          <el-button type="primary" size="mini" @click="updateTitle(scope.row)">确定</el-button>
        </div>
        <template #reference>
          <el-button type="primary" icon="el-icon-edit" circle></el-button>
        </template>
        </el-popover>
        <el-button type="danger" icon="el-icon-delete" circle @click="open(scope.row)"></el-button>
      </template>
    </el-table-column>
  </el-table>
  </div>
</template>
 
<script>
export default {
  name: '',
  data(){
    return{
      coverData:[]
    }
  },
  methods:{
    // 获取相册列表
    async getCoverData(){
      let {data} = await this.$axios.get("/admin/album/publish/getCover",{
       params:{
          type:"静态相册"
       }
      })
      let d = data.data
      d.forEach(item=>{
        item.visible = false
      })
      if(data.code) return this.$message.warning(data.mes)
      this.coverData = d
    },
    // 日期转化
    conversionDate(date){
      let time = new Date(date)
      let y = time.getFullYear()
      let month = time.getMonth()+1<10?"0"+( time.getMonth()+1): time.getMonth()+1
      let day = time.getDate()<10?"0"+time.getDate():time.getDate()
      let h = time.getHours()<10?"0"+time.getHours():time.getHours()
      let f = time.getMinutes()<10?"0"+time.getMinutes():time.getMinutes()
      let s = time.getSeconds()<10?"0"+time.getSeconds():time.getSeconds()
      return `${y}-${month}-${day} ${h}:${f}:${s}`
    },
    // 封面图上传触发
    coverChange(file,fileList){
      const isJPG = /^image\/(jpeg|png)$/.test(file.raw.type)
        const isLt2M = file.size / 1024 / 1024 < 1;

        if (!isJPG) {
          this.$message.warning('上传封面图片只能是 JPG/PNG 格式!');
          fileList.pop()
        }
        if (!isLt2M) {
          this.$message.warning('上传封面图片大小不能超过 1MB!');
          fileList.pop()
        }
        return isJPG && isLt2M;
    },
    // 封面图上传成功
    coverSuccess(res){
      if(res.code) return this.$message.warning(res.mes)
      this.$message.success(res.mes)
      this.getCoverData()
    },
    // 修改图片标题
    async updateTitle(item){
      item.visible = false
      let {data} = await this.$axios.post("/admin/album/update/updateTit",{
        title:item.title,
        _id:item._id
      })
      if(data.code) return this.$message.warning(data.mes)
      this.$message.success(data.mes)
    },
    // 删除日志提示
    open(item) {
      this.$confirm('此操作将永久删除该封面相册, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
      .then(() => {
        this.deleteCover(item)
      })
      .catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
        })
      })
    },
    // 删除封面相册
    async deleteCover(item){
      let {data} = await this.$axios.post("/admin/album/delete/delete",{
        _id:item._id
      })
      if(data.code) return this.$message.warning(data.mes)
      this.$message.success(data.mes)
      // 更新数据
      this.getCoverData()
    }
  },
  created(){
    // 获取相册列表
    this.getCoverData()
  }
}
</script>

<style scoped lang='less'>
#manage{
  .el-table__body-wrapper{
    .el-table__body{
      .el-table__row{
        .is-center{
          .cell{
          .el-image{
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
            .image-slot{
              color: #999;
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              align-items: center;
            }
          }
          }
        }
      }
    }
  }
}
</style>